import React from 'react'
import QR from 'query-string'
import detailStyle from './css/dt_details.module.css'
import getDongtai from './api/index'

class Dt_Detail extends React.Component {
    constructor() {
        super()
        this.state = {
            comments: [],
            nickname: '',
            avatarUrl: '',
            msg: '',
            img:'',
            threadId:''
        }
    }

    async componentWillMount() {
        let jq = QR.parse(this.props.location.search)
        console.log(jq)
        // console.log(jq.actId)
        //获取动态信息
        getDongtai()
            .then(body => body.json())
            .then(res => {
                let result = res.event.filter(item => item.actId == jq.actId)
                console.log(result[0])
                this.setState({
                    nickname: result[0].user.nickname,
                    avatarUrl: result[0].user.avatarUrl,
                    msg: JSON.parse(result[0].json).msg,
                    img: result[0].user.backgroundUrl,
                    threadId:jq.threadId
                })
            })

        //获取动态评论
        // console.log(jq.threadId)
        fetch(`http://106.12.79.128:666/comment/event?threadId=${jq.threadId}`)
            .then(body => body.json())
            .then(res => {
                // console.log(res)
                this.setState({
                    comments: res.comments
                })
            })

    }

    back() {
        this.props.history.go(-1)
    }
    // 评论点赞问题：实际后台已经改变状态，但前端由于未重新请求数据，liked属性还是未改变的，样式不发生改变
    like(commentId){
        // console.log("test")
        fetch(`http://106.12.79.128:666/comment/like?type=6&cid=${commentId}&threadId=${this.state.threadId}&t=1`,{credentials:'include'})
        .then(body=>body.json())
        .then(res=>console.log(res))
        this.setState({})
    }

    render() {
        let { comments } = this.state
        console.log(comments)
        return (
            // !this.state.detail ? 'loading' : (   
            <div>
                <div className={detailStyle.detail_top}>
                    <span className={detailStyle.detail_back} onClick={this.back.bind(this)}></span>
                    <span className={detailStyle.detail_title}> 动态 </span>
                </div>


                <div>
                    <div className={detailStyle.detail_info}>
                        <img className={detailStyle.detail_info_avatar} src={this.state.avatarUrl} />
                        <h1 className={detailStyle.detail_info_nickname}>{this.state.nickname}</h1>
                    </div>
                    <p className={detailStyle.detail_info_msg}>{this.state.msg}</p>
                    <img className={detailStyle.detail_info_img} src={this.state.img} />
                </div>


                <div>
                    <hr />
                    <p className={detailStyle.newComments}>最新评论:</p>
                    <ul>
                        {comments.map(item => <li className={detailStyle.comment_list} key={item.commentId}>
                            <div className={detailStyle.header}>
                                <img className={detailStyle.touxiang} src={item.user.avatarUrl} />
                                <span className={detailStyle.nickname}>{item.user.nickname}</span>
                                {item.liked ? <span className={detailStyle.detail_support2}></span> : <span onClick={this.like.bind(this,item.commentId)} className={detailStyle.detail_support}></span>}
                            </div>
                            <p className={detailStyle.content}>{item.content}</p>
                            <hr />
                        </li>)}
                    </ul>
                </div>
            </div>
            // )
        )
    }
}

export default Dt_Detail